<template>
    <div>
        <div ref="Pie" :style="styleClass" element-loading-text="获取数据中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)"></div>
    </div>
</template>
<script setup lang='ts'>
import { onMounted, onBeforeUnmount, reactive, getCurrentInstance } from 'vue';

//***引入
import * as echarts from 'echarts';
import { object, array } from 'vue-types';

const props = defineProps({
    styleClass: {
        type: Object,
        default: false
    },
    chartData: {
        type: Array<any>,
        default: false
    }
});

const data = reactive(props.chartData)


let myChart: any = null

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const initChart = () => {
    let Pie = proxy?.$refs.Pie
    // @ts-ignore
    myChart = echarts.init(Pie);
    // 指定图表的配置项和数据
    let option = {
        // backgroundColor: "#21263A",
        color: ["#ffc20e", "#00ae9d"],
        grid: {
            top: "5%",
            left: "2%",
            right: "5%",
            bottom: "5%",
            containLabel: true
        },
        tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(61, 85, 102, 0.2)",
            borderWidth: 1,
            borderColor: "#9DBAE1", // 边框颜色
            // 选中线颜色
            axisPointer: {
                lineStyle: {
                    color: "#9DBAE1"
                }
            },
            // 字体颜色
            textStyle: {
                color: "#fff",
                fontSize: 10
            }
        },
        legend: {
            right: "3%",
            icon: "circle",
            itemWidth: 8,
            itemGap: 20,
            textStyle: {
                padding: [0, 0, 0, 5]
            }
        },
        xAxis: [
            {
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    color: "#74739D",
                    fontSize: 14
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                },
                data: ["11", "12", "13", "14", "15", "16", "17"]
            }
        ],
        yAxis: [
            {
                type: "value",
                name: "",
                axisLabel: {
                    color: "#74739D",
                    fontSize: 14
                },
                splitLine: {
                    lineStyle: {
                        type: "solid",
                        color: "rgba(255,255,255,.1)",
                        width: 1
                    }
                }
            }
        ],
        series: [
            {
                name: "",
                type: "line",
                smooth: true, // 是否平滑曲线显示
                // symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
                symbolSize: 0,
                lineStyle: {
                    color: "#ffc20e" // 线条颜色
                },
                areaStyle: {
                    // 区域填充样式
                    // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                        [
                            { offset: 0, color: "rgba(255,194,14, 0.8)" },
                            { offset: 1, color: "rgba(255,194,14, 0)" }
                        ],
                        false
                    )
                    // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
                    // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
                data: [20, 58, 19, 56, 86, 35, 25]
            },
            {
                name: "",
                type: "line",
                smooth: true, // 是否平滑曲线显示
                // symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
                symbolSize: 0,
                lineStyle: {
                    color: "#00F2EF" // 线条颜色
                },
                areaStyle: {
                    // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                        [
                            { offset: 0, color: "rgba(0,242,239, 0.8)" },
                            { offset: 1, color: "rgba(216,216,216, 0)" }
                        ],
                        false
                    )
                    // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
                    // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
                data: [40, 29, 38, 28, 43, 45, 62]
            }
        ]
    };
    // 其他各种图表一个原理
    let index = 0;
    setInterval(function () {
        // 这里的7 为x轴的长度
        if (index >= 7) {
            index = 0;
        }
        myChart.dispatchAction({
            type: "showTip", // 提示框
            seriesIndex: 0,
            dataIndex: index // 第 lightIndex 柱子高亮
        });
        index += 1;
    }, 2000);
    option && myChart.setOption(option);
}



window.addEventListener("resize", () => {
    myChart.resize()
});

//*** 挂载Echarts
onMounted(() => {
    initChart()
})

onBeforeUnmount(() => {
    window.removeEventListener('resize', () => {
        myChart.resize()
    });
    // ResizeListener.uninstall(myChart)
})



</script>